<script setup>
  import { ref } from 'vue'

  const emit = defineEmits(['update:start', 'update:end'])
  const props = defineProps({
    start: {
      type: String,
      required: true,
    },
    end: {
      type: String,
      required: true,
    },
    type: {
      default: 'daterange', // daterange、datetimerange、monthrange
    },
    format: {
      default: 'YYYY-MM-DD',
    },
    valueFormat: {
      default: 'YYYY-MM-DD HH:mm:ss',
    },
    timeformat: {
      default: 'HH:mm:ss',
    },
  })
  const dateRange = ref([])

  const dateChange = (e) => {
    emit('update:start', e ? e[0] : '')
    emit('update:end', e ? e[1] : '')
  }
  const resetDate = () =>{
    dateRange.value = []
  }

  defineExpose({
    resetDate
  })
</script>

<template>
  <el-date-picker
    v-model="dateRange"
    :format="props.format"
    :type="props.type"
    :value-format="props.valueFormat"
    :time-format="timeformat"
    end-placeholder="结束日期"
    start-placeholder="开始日期"
    @change="dateChange"
  />
</template>
